<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>

    <div id="app">
        <h1>综合练习</h1>
        
        普通用户<input type="radio" value="noob" v-model="user_mod">
        会员用户<input type="radio" value="pro" v-model="user_mod">

        <!-- 区分用户类型 -->
        <div v-show="user_mod!=''">
            <div v-if="user_mod=='noob'">
                <p>用户你好,欢迎光临</p>
                数量：<input type="text">个
                <br>单价：<input type="text">元
            </div>

            <div v-else>
                <p>尊敬的会员您好请问您是
                    <select v-model="pro_mod">
                        <option value="白银会员">白银会员</option>
                        <option value="黄金会员">黄金会员</option>
                    </select>
                </p>
                <p>{{pro_mod}}欢迎你</p>
                    数量：<input type="text">个
                <br>单价：<input type="text">元
            </div>

        </div>
    </div>
</body>
</html>

<script>
    const app = Vue.createApp({
        data() {
            return {
                user_mod: 'noob',
                pro_mod: '白银会员',
            }
        }
    }).mount("#app")
</script>